<template>
  <div class="accessibility-toolbar" :class="{ 'show': isVisible }">
    <div class="toolbar-content">
      <div class="toolbar-title">轻松阅读服务设置</div>
      <div class="toolbar-buttons">
        <button class="toolbar-btn" title="读屏专用" @click="handleScreenReader">
          <img src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/f7c97ece7fee4d759d52166fcaa57c45.png~tplv-a9rns2rl98-24:720:720.png?rk3s=1fb89129&x-expires=1756787031&x-signature=hfUpCICZpY3vFdxFmxoIC4sZGJU%3D" alt="读屏专用">
          <span>读屏专用</span>
        </button>
        <button class="toolbar-btn" title="声音开关" @click="handleSoundToggle">
          <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/f88d716622074c53a3df0c59fedd26bc.png~tplv-a9rns2rl98-24:720:720.png?rk3s=1fb89129&x-expires=1756787093&x-signature=gxr8iKb4GjETDA5ZHkS%2F2gSxFm8%3D" alt="声音开关">
          <span>声音开关</span>
        </button>
        <button class="toolbar-btn" title="语速" @click="handleSpeechRate">
          <img src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/7513d16a00f84c2791b6e2a62a3d664e.png~tplv-a9rns2rl98-24:720:720.png?rk3s=1fb89129&x-expires=1756787837&x-signature=T82%2BAAhPUoFd%2BZRMrwua2euRjbk%3D" alt="语速">
          <span>语速</span>
        </button>
        <button class="toolbar-btn" title="阅读方式" @click="handleReadingMode">
          <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/43d834e6b2f049ff80f5c32029e274b6.png~tplv-a9rns2rl98-24:720:720.png?rk3s=1fb89129&x-expires=1756788140&x-signature=P%2FV62ewJCsQHZn8ROlDCi%2F6NUYw%3D" alt="阅读方式">
          <span>阅读方式</span>
        </button>
        <button class="toolbar-btn" title="配色" @click="handleColorScheme">
          <span class="icon">🎨</span>
          <span>配色</span>
        </button>
        <button class="toolbar-btn" title="放大" @click="handleZoomIn">
          <span class="icon">+</span>
          <span>放大</span>
        </button>
        <button class="toolbar-btn" title="缩小" @click="handleZoomOut">
          <span class="icon">-</span>
          <span>缩小</span>
        </button>
        <button class="toolbar-btn" title="重置" @click="handleReset">
          <span class="icon">⟳</span>
          <span>重置</span>
        </button>
        <button class="toolbar-btn close-btn" title="关闭" @click="handleClose">
          <span class="icon">✕</span>
          <span>关闭</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits,computed } from 'vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
  // 控制工具栏显示/隐藏
  visible: {
    type: Boolean,
    default: false
  }
});

// 定义组件事件
const emit = defineEmits([
  'close',         // 关闭工具栏
  'screen-reader', // 读屏专用
  'sound-toggle',  // 声音开关
  'speech-rate',   // 语速调整
  'reading-mode',  // 阅读方式
  'color-scheme',  // 配色方案
  'zoom-in',       // 放大
  'zoom-out',      // 缩小
  'reset'          // 重置
]);

// 计算属性获取可见性
const isVisible = computed(() => props.visible);

// 处理关闭工具栏
const handleClose = () => {
  emit('close');
};

// 处理读屏专用
const handleScreenReader = () => {
  ElMessage.info('读屏专用功能已激活');
  emit('screen-reader');
};

// 处理声音开关
const handleSoundToggle = () => {
  ElMessage.info('声音开关已切换');
  emit('sound-toggle');
};

// 处理语速调整
const handleSpeechRate = () => {
  ElMessage.info('语速调整功能已激活');
  emit('speech-rate');
};

// 处理阅读方式
const handleReadingMode = () => {
  ElMessage.info('阅读方式已切换');
  emit('reading-mode');
};

// 处理配色方案
const handleColorScheme = () => {
  ElMessage.info('配色方案已切换');
  emit('color-scheme');
};

// 处理放大
const handleZoomIn = () => {
  ElMessage.info('页面已放大');
  emit('zoom-in');
};

// 处理缩小
const handleZoomOut = () => {
  ElMessage.info('页面已缩小');
  emit('zoom-out');
};

// 处理重置
const handleReset = () => {
  ElMessage.info('所有设置已重置');
  emit('reset');
};
</script>

<style lang="scss" scoped>
.accessibility-toolbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: #555;
  color: white;
  transform: translateY(-100%);
  transition: transform 0.3s ease-out;
  z-index: 1000;
  padding: 10px 20px;

  &.show {
    transform: translateY(36px); /* 移动到顶部导航下方 */
  }

  .toolbar-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #fff;
  }

  .toolbar-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .toolbar-btn {
    background-color: #777;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background-color 0.2s;

    &:hover {
      background-color: #999;
    }

    img {
      width: 24px;
      height: 24px;
      object-fit: contain;
    }

    .icon {
      font-size: 18px;
    }
  }

  .close-btn {
    background-color: #d9534f;

    &:hover {
      background-color: #c9302c;
    }
  }
}
</style>
